@import 'story-params'

html
  overflow: hidden
  height:100%

body, #main
  height:100%

nav
  text-align left
  padding 12px 20px 12px 9px

.relative
  position relative

.vendor, .save
  padding-left 30px

.icon_vendor
  position absolute

.icon_vendor.github
  margin 3px 0 0 6px

.icon_vendor.dropbox
  margin 6px 0 0 9px

.shadowbox
  borderRadius(4px)
  -webkit-box-shadow 0px 0px 80px rgba(0,0,0,0.30), inset 0 0 5px rgba(0,0,0,0.6)
  margin 0 auto
  
.opacity_ten
  normOpacity(10)
  
.opacity_thirty
  normOpacity(30)

.set_wrap
  color #CCC
  display block
  line-height 27px
  font-size 0

#settings
  background url(settingsImg)
  background-position 0 0
  display block
  font-size 0
  height 17px
  width 16px
  position absolute
  right 35px
  top 15px
  
.cont
  position absolute
  right 25px
  top 12px
  display inline-block
  font-family arial, sans-serif
  height 29px
  padding 0
  margin 0
  text-align right
  white-space nowrap
  width 88px
  z-index auto

        
.core_inner
  userSelect()
  gradient-vertical(rgb(245,245,245), rgb(241,241,241))
  border-color rgba(0, 0, 0, 0.097)
  border-style solid
  borderRadius(4px)
  border-top-width 1px
  color #444
  cursor default
  display inline-block
  font-family arial, sans-serif
  font-size 11px
  font-weight bold
  height 27px
  line-height 27px
  margin-left 16px
  outline-color #444
  outline-style none
  outline-width 0px
  padding-left 8px
  padding-right 8px
  position relative
  text-align center
  white-space nowrap
  width 54px
  z-index 2

.core_menu
  userSelect()
  gradient-vertical(rgb(245,245,245), rgb(241,241,241))
  border-color rgba(0, 0, 0, 0.0976562)
  border-style solid
  border-width 1px
  borderRadius(4px)
  color #444
  cursor default
  display inline-block
  font-family arial, sans-serif
  font-size 11px
  font-weight bold
  height auto
  line-height 27px
  margin-left 0
  padding-bottom 0px
  padding-left 8px
  padding-right 22px
  position relative
  text-align center
  white-space nowrap
  width 100%
  z-index 2
  display none
  right 28px

.topbar div ul
  float none
  margin 2px auto

.topbar div .core_menu ul li
  display block
  float none
  
        
.inner_one
  background url(innerOneImg) no-repeat 0 -21px
  height 21px
  width 21px
  margin-top -3px
  vertical-align middle
  opacity .55
  cursor default
  font-size 11px
  font-weight bold
  text-align center
  line-height 27px
  color #444
  position relative
  display inline-block
  

.inner_two
  opacity .55
  margin-top -3px
  vertical-align middle
  background url(innerTwoImg) no-repeat 0 1px
  position relative
  display inline-block
  height 6px
  width 7px
  font-size 0
  margin-left 3px
  color #444
  cursor default
  font-weight bold
  text-align center
  line-height 27px

#notify_container
  userSelect(none)
  position fixed
  top -2px
  width 100%
  height auto
  overflow auto
  text-align center
  z-index 10001
  
#notify
  userSelect(none)
  width 160px
  margin 0 auto
  gradient-vertical(#CCFFCC, #66cc66)
  borderRadius(4px)
  boxCenter()
  border 1px solid rgba(0, 0, 0, 0.0976562)
  color #444
  font-weight bold
  height auto
  line-height 1.5em
  padding 6px 8px
  text-align center
  overflow auto
  display none

.modal-body ul
  margin 0
  overflow auto

.private_repo
  background transparent url(/img/icon_lock_16x16.png) no-repeat scroll top left

.private_repo .tree_file
  padding-left 20px

bodyTransitionTime = .4s
mainTransitionTime = .15s

#main
  opacity 1
  transition opacity mainTransitionTime linear  
  -webkit-transition opacity mainTransitionTime linear
  -moz-transition opacity mainTransitionTime linear  
  -o-transition opacity mainTransitionTime linear  
  -ms-transition opacity mainTransitionTime linear  
  
.bye
  opacity 0

#main.bye
  opacity 0

.slick
  opacity 1
  transition opacity bodyTransitiontime linear  
  -webkit-transition opacity bodyTransitionTime linear
  -moz-transition opacity bodyTransitionTime linear  
  -o-transition opacity bodyTransitionTime linear  
  -ms-transition opacity bodyTransitionTime linear  

#loading
  position absolute
  top 0 
  left 0
  width 100%
  height 100%
  background #fff
  text-align center
  z-index 99998

#loading p:first-child
  position absolute
  color #000
  top 50%
  left 50%
  margin -100px -110px 0
  text-align center
  font-size 72px
  width 220px

#loading p:last-child
  color #111
  margin 42px auto
  text-align center
  font-size 18px

noscript
  z-index 99999
  position absolute
  top 30px
  width 100%

noscript p
  color #000
  font-size 24px
  text-align center
  padding 10px 0

tr = top .25s ease-out

#loading.swift_top
  top -100%
  transition tr  
  -webkit-transition tr
  -moz-transition tr  
  -o-transition tr  
  -ms-transition tr  

#loading.fade_slow, .fade_slow
  normOpacity(0)
  tr = opacity 2.8s ease-in
  -webkit-transition tr
  -moz-transition tr  
  -o-transition tr  
  -ms-transition tr  
  transition tr  

#loading .progress
  position absolute
  top 50%
  left 50%
  height 30px
  margin -15px -100px 0px
  overflow hidden
  width 200px

.editorPanel,.previewPanel
  tr = all .8s ease-in
  -webkit-transition tr
  -moz-transition tr
  -o-transition tr
  -ms-transition tr
  transition tr

.slide_out
  margin-top -60px
  tr = margin-top .2s ease-out
  -webkit-transition tr
  -moz-transition tr  
  -o-transition tr  
  -ms-transition tr  
  transition tr  
  
.slide_in
  margin-top 0px
  tr = margin-top .2s ease-in
  -webkit-transition tr
  -moz-transition tr  
  -o-transition tr  
  -ms-transition tr  
  transition tr  

.slide_left
  margin-top 0px
  tr = margin-top .2s ease-in
  transition tr  
  -webkit-transition tr
  -moz-transition tr  
  -o-transition tr  
  -ms-transition tr  
  
.slide_left
  right 25px
  tr = right .2s ease-out
  -webkit-transition tr
  -moz-transition tr  
  -o-transition tr  
  -ms-transition tr  
  transition tr  

.slide_right
  right -40px
  tr = right .2s ease-out
  -webkit-transition tr
  -moz-transition tr  
  -o-transition tr  
  -ms-transition tr  transition tr  
  
.main-error
  margin 2% auto
  max-width 660px
